<template>
      <div class="container" v-cloak>
            <h2>小黑记事本</h2>
            <section>
                <div>
                    <input type="text" placeholder="请输入任务" v-model="taskName" @keyup.enter="add">
                    <button @click="add()">添加任务</button>
                </div>
            </section>
        </div>    
</template>

<script>
export default {
    data() {
        return {
            taskName: '',
        }
    },
    props: ['tasks'],
    methods: {
        add() {
            // alert('子组件触发')
            this.$emit('addTask', this.taskName)
            this.taskName = ''
        }
    }
}
</script>

<style scoped>
.container {
    width: 350px;
    margin: 200px auto 0px;
    background: rgb(234, 231, 231, .6);
    text-align: center;
    padding: 10px 15px 20px;
    color: rgb(220, 29, 22);
}

.container>h2 {
    font-weight: 400;
    margin-bottom: 10px;
}

.container>section {
    background: #fff;
    padding: 5px 5px 10px;
}

.container>section input::placeholder {
    /* text-indent: 1em; */
    color: rgb(184, 181, 181);
    font-style: italic;
}

.container>section>div {
    display: flex;
    justify-content: center;
}

.container>section input {
    width: 240px;
    height: 40px;
    border: 2px solid rgb(220, 29, 22);
    border-right: none;
    border-radius: 5px 0 0 5px;
    padding-left: 1em;
}

.container>section button {
    height: 40px;
    line-height: 40px;
    background: rgb(220, 29, 22);
    color: #fff;
    padding: 0 5px;
    border: 1px solid rgb(220, 29, 22);
    border-radius: 0 5px 5px 0;
    font-size: 14px;
}
</style>